<template>
  <div>
    <base-header class="pb-6 pb-8 pt-5 pt-md-6 bg-gradient-success">
      <!-- Card stats -->
    </base-header>
    <b-container fluid class="mt--7">
      <b-row>
        <b-col>
          <el-card>
            <div class="drag-box">
              <div class="drag-box-item">
                <div class="item-title">
                  <table style="width: 100%">
                    <td
                      style="width: 100%; text-align: center; font-size: 20px"
                    >
                      用户组
                    </td>
                  </table>
                </div>

                <draggable
                  v-model="rolesInfoList"
                  @remove="addUrl"
                  :options="dragOptions2"
                >
                  <transition-group tag="div" id="0" class="item-ul">
                    <div
                      v-for="(item, index) in rolesInfoList"
                      class="drag-list"
                      :key="index"
                    >
                      {{ item.name }}
                    </div>
                  </transition-group>
                </draggable>
              </div>

              <div
                class="drag-box-item"
                v-for="(group, index) in groupInfo"
                :key="group.index"
              >
                <div class="item-title">
                  <table style="width: 100%">
                    <td style="width: 50%; text-align: left; font-size: 20px">
                      {{ groupList[index + 1].name }}
                    </td>
                    <td style="width: 50%; text-align: right">
                      <el-button
                        class="myButton"
                        @click="
                          deleteGroup(
                            groupList[index + 1].id,
                            groupList[index + 1].name
                          )
                        "
                        >Delete</el-button
                      >
                    </td>
                  </table>
                </div>

                <draggable
                  v-model="groupInfo[index]"
                  @remove="removeHandle"
                  :options="dragOptions"
                >
                  <transition-group tag="div" :id="index + 1" class="item-ul">
                    <div
                      v-for="(item, index) in groupInfo[index]"
                      class="drag-list"
                      :key="index"
                    >
                      {{ item.name }}
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </div>
          </el-card>
        </b-col>
      </b-row>
      <b-row>
        <b-col>
          <el-card>
            <table class="myTable">
              <thead>
                <th>用户名称</th>
                <th>角色</th>
                <th>操作</th>
              </thead>
              <tbody>
                <tr>
                  <td>马保国</td>
                  <!-- <td><el-select></el-select></td> -->
                  <td><button class="myButton">删除</button></td>
                </tr>
              </tbody>
            </table>
          </el-card>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
import axios from "axios";
import draggable from "vuedraggable";
export default {
  name: "draglist",
  data() {
    return {
      dragOptions: {
        animation: 120,
        scroll: true,
        group: "sortlist",
        ghostClass: "ghost-style",
      },
      dragOptions2: {
        animation: 120,
        scroll: true,
        group: {
          name: "sortlist",
          pull: "clone",
        },
        ghostClass: "ghost-style",
      },
      newGroupName: "",
      groupList: [
        { name: "用户组", id: "000000" },
        { name: "/admin", id: "100002" },
      ],
      groupInfo: [
        [
          {
            name: "admin",
            userId: "100001",
          },
        ],
      ],
      rolesInfoList: [
        {
          name: "admin",
          userId: "100001",
        },
        {
          name: "student",
          userId: "100001",
        },
        {
          name: "teacher",
          userId: "100001",
        },
      ],
    };
  },
  components: {
    draggable,
  },
  mounted() {},
  methods: {
    removeHandle(event) {
      if (event.to.id == 0) {
        this.rolesInfoList.splice(event.newIndex, 1);
      }
      //   let userId = this.groupInfo[event.to.id][event.newIndex].userId;
      //   let userName = this.groupInfo[event.to.id][event.newIndex].name;
      //   let groupId = this.groupList[event.to.id].id;
      //   let groupName = this.groupList[event.to.id].name;

      //  this.$message.success(`from ${event.from.id} to ${event.to.id} `);
    },
    addUrl(event) {
      // console.log(event)
      console.log(event);
    },
    deleteGroup(id, name) {},
  },
};
</script>
<style scoped>
.myTable {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 1em;
  border: solid 0.2em #dfdfdf;
}
.myTable th {
  border-bottom: solid 0.1em #dfdfdf;
  border-right: solid 0.1em #dfdfdf;
  border-left: solid 0.1em #dfdfdf;
}
.myTable td {
  border-bottom: solid 0.1em #dfdfdf;
  border-right: solid 0.1em #dfdfdf;
  border-left: solid 0.1em #dfdfdf;
  border-top: solid 0.1em #dfdfdf;
}
.myTable th:last-child,
td:last-child {
  border-right: solid 0em #dfdfdf;
}
.myTable th:first-child,
td:first-child {
  border-left: solid 0em #dfdfdf;
}

.myTable tr:last-child td {
  border-bottom: solid 0em #dfdfdf;
}
.myTable {
  width: 100%;
  text-align: center;
}

.myTable th,
td {
  height: 3em;
}
.myButton {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  color: #33cc33;
}
.myButton:hover {
  color: #ff6666;
}

.drag-box {
  display: flex;
  user-select: none;
  flex-wrap: wrap;
}
.drag-box-item {
  flex: 1;
  max-width: 200px;
  min-width: 200px;
  background-color: #eff1f5;
  margin-right: 16px;
  margin-top: 10px;
  border-radius: 6px;
  border: 1px #e1e4e8 solid;
}
.item-title {
  padding: 8px 8px 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  font-weight: 600;
}
.item-ul {
  padding: 0 8px 8px;
  height: 300px;
  overflow-y: scroll;
}
.item-ul::-webkit-scrollbar {
  width: 0;
}
.drag-list {
  border: 1px #e1e4e8 solid;
  padding: 10px;
  margin: 5px 0 10px;
  list-style: none;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: border 0.3s ease-in;
  transition: border 0.3s ease-in;
}
.drag-list:hover {
  border: 1px solid #20a0ff;
}
.drag-title {
  font-weight: 400;
  line-height: 25px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
.ghost-style {
  display: block;
  color: transparent;
  border-style: dashed;
}
</style>
